<template>
  <div class="mulu-body" @mousewheel="moveos">
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
        </router-link>
        <div class="tit-top">
          <h3>目录</h3>
          <router-link to="/home" class="home">首页</router-link>
        </div>
      </div>
    </header>
    <div class="mulu-title">
      <span class="list-but">1-100章</span>
      <i class="list-down" @click="muluclick" v-if="show"></i>
      <i class="list-up" @click="muluclick" v-else></i>
    </div>
    <div class="mulu-num" v-show="muluon">
      <ul class="f-cb" @click="listclivk">
        <li class="j-group" v-for="(items, ns) in navlistdata" :index="ns">
          {{ ns * 100 + 1 }}-{{ ns * 100 + items.length }}
        </li>
      </ul>
    </div>
    <div class="mulu-yuedu">
      <ul>
        <li v-for="(item, x) in booklistdata" v-if="x < 100">
          <router-link
            :to="`/yuedu?source_uuid=${book_uuid}&content_uuid=${item.uuid}&title=${book_title}`"
            >{{ item.title }}</router-link
          >
        </li>
      </ul>
    </div>
    <div class="btns" @click="datas">
      <router-link to="" class="one">上100章</router-link>
      <router-link to="" class="two">下100章</router-link>
    </div>
    <div class="list-bottom"></div>
  </div>
</template>
<script>
import { bklistFunc } from "@/request/index";
export default {
  data() {
    return {
      book_title: this.$route.query.title,
      book_uuid: this.$route.query.source_uuid,
      booklistdata: [],
      navlistdata: [],
      muluon: false,
      swic: 0,
      show: false,
    };
  },
  methods: {
    async bkxq() {
      let id = this.book_uuid;
      bklistFunc(id).then((res) => {
        // console.log(res.data.catalog)
        let listdata = res.data.catalog;
        this.booklistdata = listdata.map((item) => {
          // console.log(item);
          // console.log(list);
          return item;
        });
        let navlis = this.booklistdata;
        let navslist = this.booklistdata.length;
        // console.log(this.booklistdata.length);
        let sta = 100;
        let end = 100;
        let index = 0;
        let muns = Math.ceil(navslist / 100);
        // console.log(muns);
        let nalistdata = Math.ceil(navslist / muns);
        // console.log(nalistdata);
        //  let navs=navslist.splice(2500,nalistdata*24)
        for (let nums = 0; nums < muns; nums++) {
          this.navlistdata[index++] = navlis.slice(
            nums * sta,
            (nums + 1) * end
          );
        }
        // console.log(this.navlistdata);
      }).catch(err => {
          console.log("请求失败...");
        });
    },
    muluclick() {
      // console.log("ch");
      this.show=!this.show
      if (this.muluon === true) {
        this.muluon = false;
      } else {
        this.muluon = true;
      }
    },
    listclivk(e) {
      e = e || window.event;
      let navs = document.querySelectorAll(".f-cb li");
      //   console.log(e.target.tagName)
      if (e.target.tagName === "LI") {
        // console.log(e.target.className);
        navs.forEach((item, i) => {
          item.classList.remove("crt");
        });
        let j = e.target.getAttribute("index");
        // console.log(j);
        this.swic = j;
        // console.log(this.swic);
        e.target.classList.add("crt");
        this.muluon = false;
        document.querySelector(".list-but").textContent =
          e.target.textContent + "章";
        this.booklistdata = this.navlistdata[this.swic];
        if (this.swic === 0) {
          // document.querySelector(".one").style.backgroundColor =
          //         "#333";
          document
            .querySelector(".one")
            .setAttribute(
              "style",
              "background-color: #ebebe6;border: #ebebe6 solid 1px;color: #aba499;"
            );
        } else if (this.swic !== 0) {
          document
            .querySelector(".one")
            .setAttribute(
              "style",
              "background-color: #fcfafa;border: #e8e7e6 solid 1px;color: #998c7f;"
            );
        }
        if (this.swic === this.navlistdata.length - 1) {
          // document.querySelector(".one").style.backgroundColor =
          //         "#333";
          document
            .querySelector(".two")
            .setAttribute(
              "style",
              "background-color: #ebebe6;border: #ebebe6 solid 1px;color: #aba499;"
            );
        } else if (this.swic !== this.navlistdata.length - 1) {
          document
            .querySelector(".two")
            .setAttribute(
              "style",
              "background-color: #fcfafa;border: #e8e7e6 solid 1px;color: #998c7f;"
            );
        }
      }
    },
    datas(e) {
      e = e || window.event;
      document.documentElement.scrollTop = 0;
      let uodown = document.querySelectorAll(".f-cb li");
      uodown.forEach((item, i) => {
        item.classList.remove("crt");
      });
      if (e.target.tagName === "A") {
        if (e.target.textContent === "上100章") {
          if (this.swic > 0) {
            this.swic--;
            // console.log(this.swic);
            this.booklistdata = this.navlistdata[this.swic];
            uodown[this.swic].classList.add("crt");
          }
        } else if (e.target.textContent === "下100章") {
          if (this.swic < this.navlistdata.length - 1) {
            this.swic++;
            console.log(this.swic);
            this.booklistdata = this.navlistdata[this.swic];
            uodown[this.swic].classList.add("crt");
          }
        }
        // console.log(this.swic);
        if (this.swic === 0) {
          // document.querySelector(".one").style.backgroundColor =
          //         "#333";
          document
            .querySelector(".one")
            .setAttribute(
              "style",
              "background-color: #ebebe6;border: #ebebe6 solid 1px;color: #aba499;"
            );
        } else if (this.swic !== 0) {
          document
            .querySelector(".one")
            .setAttribute(
              "style",
              "background-color: #fcfafa;border: #e8e7e6 solid 1px;color: #998c7f;"
            );
        }
        if (this.swic === this.navlistdata.length - 1) {
          // document.querySelector(".one").style.backgroundColor =
          //         "#333";
          document
            .querySelector(".two")
            .setAttribute(
              "style",
              "background-color: #ebebe6;border: #ebebe6 solid 1px;color: #aba499;"
            );
        } else if (this.swic !== this.navlistdata.length - 1) {
          document
            .querySelector(".two")
            .setAttribute(
              "style",
              "background-color: #fcfafa;border: #e8e7e6 solid 1px;color: #998c7f;"
            );
        }
      }
    },
    moveos(e) {
      if (e.deltaY > 0) {
        // console.log("cg")
        this.muluon = false;
      }
    },
  },
  created() {
    this.bkxq();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.mulu-body {
  width: 100%;
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .mulu-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 12px;
    background-color: #912020;
    overflow: hidden;
    .list-but {
      //   padding: 0 15px;
      text-align: center;
      color: #aaa;
    }
    i {
      display: inline-block;
      margin-left: 4px;
      width: 9px;
      height: 6px;
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      &.list-down {
        background-image: url(../static/imgs/down.png);
      }
      &.list-up {
        background-image: url(../static/imgs/up.png);
      }
    }
  }
  .mulu-num {
    position: fixed;
    left: 0;
    top: 80px;
    box-sizing: border-box;
    width: 100%;
    padding: 13px 15px 0;
    background-color: #faf7f5;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid #998d80;
    ul {
      width: 100%;
      li {
        text-align: center;
        box-sizing: border-box;
        width: 25%;
        height: 32px;
        line-height: 32px;
        float: left;
        margin: 0 4%;
        margin-bottom: 13px;
        color: #998d80;
        border-radius: 16px;
        background-color: #fff;
        border: 1px solid #d1ccc7;
        &.crt {
          background-color: #d1cfcd;
          color: #fff;
        }
      }
    }
  }
  .mulu-yuedu {
    background-color: #faf7f5;
    ul {
      li {
        box-sizing: border-box;
        padding: 0 15px;
        height: 46px;
        line-height: 46px;
        border-bottom: 1px dotted #998d80;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .btns {
    width: 100%;
    display: flex;
    text-align: center;
    vertical-align: middle;
    a {
      display: inline-block;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 20px;
      width: 40%;
      margin: 3% 3% 0;
      border-radius: 3px;
      vertical-align: middle;
      &.one {
        background-color: #ebebe6;
        border: #ebebe6 solid 1px;
        color: #aba499;
      }
      &.two {
        background-color: #fcfafa;
        border: #e8e7e6 solid 1px;
        color: #998c7f;
      }
    }
  }
  .list-bottom {
    height: 100px;
    width: 100%;
  }
}
</style>